<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layout</title>
    <style>
      hr {
        margin: 10px;
      }

      .container1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
      }

      .f1 {
        width: 200px;
        height: 200px;
        background-color: #87ceeb;
        float: left;
      }

      .f2 {
        width: 200px;
        height: 200px;
        background-color: #ffd700;
        float: left;
      }

      .container2 {
        width: 600px;
        height: 600px;
        border: 1px solid #000;
      }

      .f3 {
        width: 200px;
        height: 200px;
        background-color: #ffc0cb;
        float: left;
      }

      .f4 {
        width: 200px;
        height: 200px;
        background-color: #87ceeb;
      }

      .f5 {
        width: 400px;
        height: 200px;
        background-color: rgba(255, 215, 0, 0.5);
        float: left;
      }

      .f6 {
        width: 200px;
        height: 400px;
        background-color: #ffc0cb;
      }

      .container3 {
        width: 700px;
        height: 350px;
        border: 1px solid #000;
      }

      .f7 {
        width: 200px;
        height: 150px;
        margin: 10px;
        float: left;
        background-color: #87ceeb;
      }

      .container4 {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
      }

      .f8 {
        width: 200px;
        height: 200px;
        background-color: #ffa500;
        float: left;
      }

      .f9 {
        width: 200px;
        height: 100px;
        background-color: #87ceeb;
        float: left;
      }

      .f10 {
        width: 200px;
        height: 100px;
        background-color: #ff6347;
        float: left;
      }

      .container5 {
        width: 600px;
        height: 100px;
        border: 1px solid #000;
      }

      .container5 span {
        width: 100px;
        height: 30px;
        background-color: #ff6347;
        float: left;
        margin-right: 10px;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }

      .container6 {
        width: 200px;
        border: 2px solid #f00;
        margin: 20px;
      }

      .item1 {
        width: 100px;
        height: 100px;
        background-color: #ffc0cb;
      }
      .item2 {
        width: 100px;
        height: 100px;
        background-color: #ffc0cb;
        float: left;
      }

      .container7 {
        width: 200px;
        background-color: #ddd;
        padding: 10px;
      }

      .img {
        width: 80px;
        height: 80px;
        background-color: #87ceeb;
        float: left;
        margin: 10px;
      }

      * {
        margin: 0;
        padding: 0;
      }

      .topbar {
        width: 1000px;
        height: 40px;
        background-color: #666;
        margin: 20px auto;
      }

      header {
        width: 1000px;
        height: 100px;
        margin: 20px auto 0;
      }
      header .logo {
        width: 300px;
        height: 100px;
        background-color: #87ceeb;
        float: left;
      }
      header .login {
        width: 200px;
        height: 30px;
        background-color: #ffa500;
        float: right;
      }

      header .top-nav {
        width: 680px;
        height: 50px;
        background-color: #ff6347;
        float: right;
        margin-top: 20px;
      }

      main {
        width: 1000px;
        height: 500px;
        margin: 30px auto;
      }
      main aside.ad {
        width: 300px;
        height: 500px;
        background-color: #a0c4e4;
        float: left;
      }
      main article {
        width: 680px;
        height: 500px;
        float: right;
      }
      main article .banner {
        width: 680px;
        height: 380px;
        background-color: #ffa500;
      }
      main article .pics {
        width: 680px;
        height: 100px;
        margin-top: 20px;
      }
      main article .pics ul {
        list-style: none;
      }

      main article .pics ul li {
        width: 160px;
        height: 100px;
        background-color: #008000;
        float: left;
        margin-right: 10px;
      }
      main article .pics ul li:last-child {
        width: 170px;
        margin-right: 0;
      }

      footer {
        width: 1000px;
        height: 100px;
        background-color: #808080;
        margin: 0 auto;
      }

      .clearfix::after {
        content: "";
        clear: both;
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>浮动</h1>

    <div class="container1">
      <div class="f1">float: left</div>
      <div class="f2">float: left</div>
      <div class="f3">float: left</div>
    </div>

    <hr />

    <h2>元素添加浮动后，脱离文档流</h2>

    <p>同时会影响其后面的元素，但不影响它前面的元素</p>

    <div class="container2">
      <div class="f4">normal</div>
      <div class="f5">float: left</div>
      <div class="f6">normal</div>
    </div>

    <hr />

    <h2>如果父元素的宽度不够</h2>

    <p>子元素在放不下的情况下会换行显示</p>

    <div class="container3">
      <div class="f7">float: left</div>
      <div class="f7">float: left</div>
      <div class="f7">float: left</div>
      <div class="f7">float: left</div>
    </div>

    <hr />

    <h1>浮动的顺序贴靠特性</h1>

    <p>子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找在前一个兄弟元素</p>

    <div class="container4">
      <div class="f8"></div>
      <div class="f9"></div>
      <div class="f10"></div>
    </div>

    <hr />

    <h2>元素浮动后，具有行内块级元素特性</h2>

    <p>浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流</p>

    <p>一律能够设置宽度和高度，即使它是 span 标签 或 a 标签 等等</p>

    <div class="container5">
      <span>span1</span>
      <span>span2</span>
      <span>span3</span>
      <span>span4</span>
      <span>span5</span>
    </div>

    <hr />

    <h2>浮动的元素会造成父元素高度塌陷</h2>

    <p>当给子元素添加了浮动后，子元素相当于漂浮起来，不占据页面空间。</p>

    <p>这样就造成父级元素在没有设置高度时，高度塌陷问题。</p>

    <div class="container6">
      <div class="item1">normal</div>
    </div>

    <div class="container6">
      <div class="item2">float</div>
    </div>

    <div class="clearfix"></div>

    <hr />

    <h2>浮动对文字的影响</h2>

    <p>常见的图片文字环绕效果，其实现方式主要是将图片左浮动或右浮动</p>

    <p>浮动后其相邻的文字，就会环绕图片排列</p>

    <div class="container7">
      <div class="img"></div>
      最初，引入float属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边
    </div>

    <hr />

    <h2>使用浮动实现网页布局</h2>

    <p>垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动</p>

    <div class="topbar"></div>

    <header>
      <div class="logo"></div>
      <div class="login"></div>
      <nav class="top-nav"></nav>
    </header>

    <main>
      <aside class="ad"></aside>
      <article>
        <div class="banner"></div>
        <div class="pics">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </article>
    </main>

    <footer></footer>
  </body>
</html>
